<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>女孩动画</title>
	<style>
	*{padding:0;margin:0;}
	body{width: 1360px;/*background: url(bg2.png) no-repeat 0 0;background-size: cover;*/}
	#div{width: 150px;height:190px;position: fixed;bottom:2px;}
	#div2{width:50px;height:50px;background-color: pink;border-radius: 50%;margin-left: 100px;margin-top: 450px;}
	#box,#box2{width: 125px;height:60px;}
	#box2{margin-left: 50px;}
	


	</style>
</head>
<body>
	<div id = "box"></div>
	<div id = "box2"></div>
	
	<div id="div2"></div>
	<div id = "div"></div>
	<script>

	var div = document.getElementById("div");
	var div2 = document.getElementById("div2");
	var span = document.getElementById("span");
	function girlDance(){
		var n = 0;
		setInterval(function(){
			div.style.background = "url(bg.png) no-repeat "+n+"px 0px";
			n-=170;
			if(n<=-680){
				n=0;
			}

		},500)
	}
	girlDance();
	function birdMove(){ 

		box.style.marginTop = 0+"px";
		box.style.marginLeft = 0+"px";
		box2.style.marginTop = 0+"px";
		box2.style.marginLeft = 0+"px";
		var dis = 0;
		var no1 = setInterval(function(){

			box.style.marginLeft = dis+"px";
			box2.style.marginLeft = dis+"px";

			dis +=50;
			if(dis>=680){
				dis = 0;
				clearInterval(no1);
				var no2 = setInterval(function(){
				box.style.marginTop = dis+"px";
				//box2.style.marginTop = dis+"px";
				dis+=10;
				if(dis >=500){
					
					clearInterval(no2);
					birdMove();
					stoneMove();
					birds();

				}

				},100)
			}
		},200)
	}
	birdMove()

	//body颜色渐变
	function bcolor(){
		var n=1;
		setInterval(function(){
		document.body.style.background ="rgba(0,0,122,"+n+")";
		n-=0.01;
		if(n<=0){n=1}

		},100)
	}
	//	鸟飞
	var no3;
	function birds(){
		var n = 0;
		no3 =setInterval(function(){
			box.style.background = "url(bird.png) no-repeat "+n+"px -10px";
			box2.style.background = "url(bird.png) no-repeat "+n+"px -10px";
			n-=125;
			if(n<=-875){
				n=0;
			}

		},100)
	}
	//石头
	function stoneMove(){

			div2.style.marginTop = 300+"px";
			div2.style.marginLeft = 100+"px";
			div2.style.display = "block";
			var n = 300;
			var y=100
		var no=setInterval(function(){
			div2.style.marginTop = n+"px";
			div2.style.marginLeft = y+"px";


			n -=10;
			y +=20;
			if(n<=0){
				clearInterval(no);
				clearInterval(no3);


				div2.style.display = "none";
			}
		},100)
	}
	stoneMove()
	birds()
	bcolor()
	</script>
</body>
</html>